<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text">实名认证</view>
		</view>
		<view class="clear_box"></view>

		<view class="input_list">
			<view class="text">真实姓名</view>
			<input type="text" value="" placeholder="请输入真实姓名" v-model="name" />
		</view>
		<view class="input_list">
			<view class="text">身份证号</view>
			<input type="number" value="" placeholder="请输入身份证号码" v-model="number" />
		</view>

		<view class="content">
			<view class="title">请上传你的身份证照片</view>
			<view class="sfz_box">

				<view class="sfz" @tap="openImg">
					<image :src="cardImg01" mode=""></image>
					<view class="menu02">拍摄正面</view>
				</view>
				<view class="sfz" @tap="openImg02">
					<image :src="cardImg02" mode="widthFix"></image>
					<view class="menu02">拍摄反面</view>
				</view>
			</view>
		</view>

		<view class="tips">您的信息仅供本平台使用，请您放心填写</view>


		<button class="confirm" @tap="submitGo">完成</button>
	</view>
</template>

<script>
	export default {
		data() {

			return {
				scrrol:false,
				img03: [{
						url: '../../static/zj01.png',
						text: '拍摄正面'
					},
					{
						url: '../../static/zj02.png',
						text: '拍摄反面'
					}
				],
				name:'',
				number:'',
				cardImg01:'../../static/zj01.png',
				cardImg02:'../../static/zj02.png',




			};
		},

		methods: {
			submitGo(){
				let that = this;
				if (!that.name) {
					that.Msg.Fail('请输入姓名');
					return;
				}
				if (!that.number) {
					that.Msg.Fail('请输入身份证号');
					return;
				}
				if (that.cardImg01 == '../../static/zj01.png') {
					that.Msg.Fail('请上传身份证正面');
					return;
				}
				if (that.cardImg02 == '../../static/zj02.png') {
					that.Msg.Fail('请上传身份证反面');
					return;
				}
				
				that.Net._post('user/check', {name:that.name,card_no:that.number,card_t:that.cardImg01,card_b:that.cardImg02}, res => {
					if (res.code == 200) {
						//console.log(res)
						that.Msg.Success('上传成功', res => {
							uni.navigateBack({});
						});
					}
				});
			},
			openImg() {
			  let that = this;
			  let url = that.Cfg.Setting.root;
				uni.chooseImage({
				  sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
				  sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
					crop:{
						width:'100',
						height:'100',
					},
				  success: res => {
				    const temFilePath = res.tempFilePaths;//图片选择完成后 获取该图片的路劲
						//console.log(temFilePath)
				    uni.uploadFile({
				      url:url + 'uploads',//上传文件的Controller
				      filePath: temFilePath[0],//要上传的文件路径
				      name:'file',
				      success: (res) => {										
				        let rex = JSON.parse(res.data)
								that.cardImg01 = rex.data.data;
				        // if(res.code == 1){
				        //   that.cardImg01 = res.data.data;
				        // }
				      }
				    })
				  }
				});
			
			},
			openImg02() {
			  let that = this;
			  let url = that.Cfg.Setting.root;
				uni.chooseImage({
				  sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
				  sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
					crop:{
						width:'100',
						height:'100',
					},
				  success: res => {
				    const temFilePath = res.tempFilePaths;//图片选择完成后 获取该图片的路劲
						//console.log(temFilePath)
				    uni.uploadFile({
				      url:url + 'uploads',//上传文件的Controller
				      filePath: temFilePath[0],//要上传的文件路径
				      name:'file',
				      success: (res) => {										
								let rex = JSON.parse(res.data)
								that.cardImg02 = rex.data.data;
				      }
				    })
				  }
				});
			
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		}
	};
</script>

<style>
	page {
		padding-top: 20px;
	}

	.content {
		width: 100%;
		margin-top: 10px;
		background-color: #fff;
		padding-bottom: 10px;
	}

	.content .title {
		width: 100%;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		color: #333;
		text-indent: 16px;
	}

	.content .img01 {
		padding: 20px 0;
		width: calc(100% - 32px);
		margin-left: 16px;
		background: #f5f5f5;
		text-align: center;
	}

	.content .img01 image {
		width: 30%;
	}

	.content .menu {
		width: calc(100% - 32px);
		margin-left: 16px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		font-size: 14px;
		color: #fff;
		background-color: #1597EF;
		border-radius: 0 0 10px 10px;
	}

	.content .sfz_box {
		width: calc(100% - 32px);
		margin-left: 16px;
		display: flex;
	}

	.content .sfz_box .sfz {
		width: calc(50% - 8px);
		background-color: #f5f5f5;
		text-align: center;
	}

	.content .sfz_box .sfz:nth-child(1) {
		margin-right: 16px;
	}

	.content .sfz_box .sfz image {
		width: 70%;
		height: 80px;
		margin: 10px 0 5px 0;
	}

	.content .sfz_box .sfz .menu02 {
		width: 100%;
		height: 30px;
		text-align: center;
		line-height: 30px;
		font-size: 14px;
		color: #fff;
		background-color: #FF7261;
		border-radius: 0 0 10px 10px;
	}

	.input_list {
		width: 100%;
		height: 50px;
		position: relative;
		background-color: #fff;
		margin-bottom: 1px;
	}

	.input_list .text {
		font-size: 13px;
		color: #333;
		line-height: 50px;
		position: absolute;
		left: 10px;
	}

	.input_list input {
		font-size: 14px;
		color: #333;
		line-height: 50px;
		height: 50px;
		position: absolute;
		right: 10px;
		text-align: right;
	}

	.tips {
		width: 100%;
		text-indent: 3%;
		line-height: 40px;
		font-size: 12px;
		color: #BEBEBE;
	}
</style>